<template>
    <!--右边菜单点击详情页-->
    <a-layout class="al-layout-dpa-detail">
        <a-layout-header>
            <dpa-header :titleStyle="titleStyle" :logo="logo" />
        </a-layout-header>
        <a-layout>
            <a-layout-sider v-show="showMenu" v-model="collapsed" width="200">
                <div class="collapse">
                    <a-icon
                        class="trigger"
                        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                        @click="() => (collapsed = !collapsed)"
                    />
                </div>
                <custom-menu
                    theme="light"
                    :menu-list="rightMenuList"
                    :router-push-key="routerPushKey"
                    :menu-expanded-keys-hot="menuExpandedKeys"
                    :default-selected-keys="defaultSelectedKeys"
                />
            </a-layout-sider>
            <a-layout>
                <a-layout-content>
                    <a-breadcrumb v-show="!showMenu" separator="/" class="dpa-bread-crumb">
                        <a-breadcrumb-item v-for="(title, index) in breadCrumbList" :key="index">
                            <span @click="handleRedirectTo(index)">{{ title }}</span>
                        </a-breadcrumb-item>
                    </a-breadcrumb>
                    <router-view class="dpa-second-content" />
                </a-layout-content>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script lang="ts">
    import { defineComponent, ref, computed } from 'vue'
    import DpaHeader from './components/Header.vue'
    import CustomMenu from '../CustomMenu.vue'
    import useAlLayoutEffect from '@/layouts/hooks/alLayoutEffect'
    import { getStorageByKey, handleRedirect } from '@/utils/common'
    import { CURRENT_URL } from '@/enums/cacheEnum'
    import { useRoute, useRouter } from 'vue-router'
    import { useI18n } from 'vue-i18n'
    import { string } from 'vue-types'
    import LayoutConfig from '../../layoutConfig.json'
    import DpaMenu from '../../dpaMenu.json'
    export default defineComponent({
        name: 'AlLayoutDpaDetail',
        components: {
            DpaHeader,
            CustomMenu
        },
        props: {
            dpaMenuConfiguration: {
                type: Object,
                default: () => {
                    return DpaMenu
                }
            },
            titleStyle: {
                type: Object,
                default: () => {
                    return {
                        title: LayoutConfig.titleSetting
                    }
                }
            },
            logo: {
                type: string
            }
        },
        setup(props) {
            // ------------------------------------------ 属性
            const { setMenuListByPermission } = useAlLayoutEffect(props)
            const { t } = useI18n()
            const collapsed = ref<boolean>(false)
            const codeNum = ref<string>('')
            const path = ref<string>('')
            const routerPushKey = ref('menuUrl')
            const route = useRoute()
            const router = useRouter()
            // ------------------------------------------ 监听
            const rightMenuList = computed(() => {
                let menuList = props.dpaMenuConfiguration.rightMenuList || []
                const bottomMenuList =
                    setMenuListByPermission(props.dpaMenuConfiguration.bottomMenuList, 'otherRouterMap') || []
                menuList.push(...bottomMenuList)
                menuList = setMenuListByPermission(menuList, 'otherRouterMap')
                // 找到当前的菜单组
                const findMenuList = menuList.find(menu => menu.code === codeNum.value)
                const list = findMenuList ? [findMenuList] : []
                formatMenuData(list)
                return list
            })
            const menuExpandedKeys = computed(() => {
                const openKeys: string[] = []
                rightMenuList.value.length > 0 && openKeys.push(rightMenuList.value[0].key)
                return openKeys
            })
            const defaultSelectedKeys = computed(() => {
                const defaultKeys: string[] = []
                const [menuList] = rightMenuList.value
                if (menuList && menuList.children && menuList.children.length > 0) {
                    const { key } = menuList.children.find(item => item.menuUrl === getStorageByKey(CURRENT_URL)) || {}
                    key && defaultKeys.push(key)
                }
                return defaultKeys
            })
            const showMenu = computed(() => {
                const [menuList] = rightMenuList.value
                let show = false
                if (menuList && menuList.children && menuList.children.length > 0) {
                    show = true
                }
                return show
            })
            const breadCrumbList = computed(() => {
                const [menuList] = rightMenuList.value
                const { name } = menuList || {}
                const list = [t('index')]
                // 有二级菜单的
                if (menuList && menuList.children && menuList.children.length > 0) {
                    const { name: nowName } = menuList.children.find(item => item.menuUrl === path.value) || {}
                    list[0] = name
                    nowName && list.push(nowName)
                } else {
                    list.push(name)
                }
                return list
            })
            // ------------------------------------------ 方法
            function formatMenuData(data) {
                for (let index = 0; index < data.length; index++) {
                    const currentData = data[index]
                    // 处理分类和页面ID重复问题
                    const { code, menuExpandFlag } = currentData
                    currentData.key = code
                    currentData.iconDisplay = menuExpandFlag
                    // 展开目录
                    if (currentData.children && currentData.children.length) {
                        // 如果有children递归继续格式化
                        formatMenuData(currentData.children)
                    } else {
                        currentData.children = null // 空数组则转化为null，否则理解为子菜单，无法点击
                    }
                }
            }
            // 首页跳转 index===0 是首页
            function handleRedirectTo(index) {
                if (index === 0) {
                    // 点击首页时清空本地存储的dpaDetail
                    sessionStorage.removeItem('dpaDetail') // 清除
                    // 路由跳转至DPA
                    handleRedirect(`${import.meta.env.VITE_PUBLIC_PATH}/`, router)
                }
            }
            function init() {
                const {
                    query: { code }
                } = route
                code && sessionStorage.setItem('code', code as string) // 存储dpa code 关键字
                const codeValue = sessionStorage.getItem('code')
                codeValue && (codeNum.value = codeValue)
            }
            // ----------------------------------------------------------------
            init()
            return {
                collapsed,
                menuExpandedKeys,
                showMenu,
                breadCrumbList,
                defaultSelectedKeys,
                routerPushKey,
                handleRedirectTo,
                rightMenuList
            }
        }
    })
</script>

<style lang="less" scoped>
    .al-layout-dpa-detail {
        height: 100%;

        .@{ant-prefix}-layout-header {
            height: 64px;
            line-height: 64px;
            padding: 0 32px;
            background-image: linear-gradient(180deg, #3b68ff 0%, #6469ff 100%);
        }

        .@{ant-prefix}-layout-sider {
            background: #fff;
        }

        .collapse {
            height: 33px;
            line-height: 33px;
            padding-left: 26px;
            border-bottom: 1px solid #efefef;
        }

        .@{ant-prefix}-layout-content {
            display: flex;
            flex-direction: column;

            .dpa-second-content {
                flex: 1;
            }
        }

        .dpa-bread-crumb {
            padding: 16px;
            cursor: pointer;
        }
    }
</style>
<i18n lang="yaml">
zh-CN:
    index: '首页'
en-US:
    index: 'home page'
</i18n>
